<template>
  <Loader v-if="isLoading" text="拼命加载中" background="rgba(0,0,0,0.8)"></Loader>
  <!-- <Message type="error" :message="error.message" v-if="error.status"></Message> -->
  <router-view></router-view>
</template>
<script lang="ts">
import { defineComponent,computed, onMounted,watch } from 'vue';
import 'bootstrap/dist/css/bootstrap.min.css'
import Loader from './components/Loader.vue'
// import Message from './components/Message.vue'
import createMessage from './components/createMessage'
import {useStore} from 'vuex'
import {GlobalDataProps} from './store'
import axios from 'axios';
export default defineComponent({
  name: 'App',
  components:{
    Loader,
    // Message
  },
  setup(){
    const store=useStore<GlobalDataProps>()
    const isLoading = computed(() => store.state.loading)
    const currentUser=computed(()=>store.state.user)
    const token=computed(()=>store.state.token)
    const error=computed(()=>store.state.error)
    onMounted(()=>{
      // //保持登录状态
      // if(!currentUser.value.isLogin && token.value){
      //   axios.defaults.headers.common.Authorization=`Bearer ${token.value}`
      //   // 保持登录状态 去 获取用户信息
      //   store.dispatch('fetchCurrentUser')
      // }
    })
    watch(()=>error.value.status,()=>{
        const {status,message}=error.value
        if(status && message){
          // 调用弹窗方法，而不是直接引用组件
          createMessage(message,'error')
        }
    });
    return {
      isLoading
    }
  }
});
</script>
